import { Button, Form, Input } from 'antd-mobile'
import styles from './index.module.scss'
import { useLogin } from './service'

const Login = () => {
  const { form, onFinish, mobileRef, count, sendCode } = useLogin()
  return (
    <div className={styles.root}>
      <div className="login-form">
        <h2 className="title">账号登录</h2>
        {/* 表单 */}
        <Form form={form} onFinish={onFinish}>
          {/* 1. 手机号 */}
          <Form.Item
            name="mobile"
            rules={[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: '手机号格式错误',
              },
            ]}
            className="login-item"
          >
            <Input ref={mobileRef} placeholder="请输入手机号" />
          </Form.Item>

          {/* 2. 验证码 */}
          <Form.Item
            name="code"
            rules={[
              { required: true, message: '请输入手机号' },
              { len: 6, message: '验证码长度为6' },
            ]}
            className="login-item"
            extra={
              // count===0 可以点击发短信，开启倒计时
              <span
                onClick={count === 0 ? sendCode : undefined}
                className="code-extra"
              >
                {count === 0 ? '发送验证码' : `${count}秒后重新发送`}
              </span>
            }
          >
            <Input placeholder="请输入验证码" autoComplete="off" />
          </Form.Item>

          {/* 提交按钮 */}
          {/* noStyle 表示不提供 Form.Item 自带的样式 */}
          {/* 
            需求：
            1. 默认表单没有输入或表单输入了有校验错误，按钮转态为禁用
            2. 正确输入了，按钮状态为启用
            流程：
            1. 获取表单实例
            2. 使用实例上的方法：isFieldsTouched | getFieldsError
            3. 判断：表单没有输入或表单输入了是否有校验错误 =》控制按钮的启用或禁用
                  == 条件1-表单中所有的项有没有输入过：==
                  !form.isFieldsTouched(true)=》1. true（都输入过了） 2. false（都没输入过或部分输入了）
                  == 条件2-表单输入了是否有校验错误：==
                  form.getFieldsError().filter(({ errors }) => errors.length)过滤有错误的字段返回新数组，
                  如果新数组长度大于0，说明有格式错误=》按钮禁用 disabled={true}
                  如果新数组长度等于0，说明没有有格式错误=》按钮启用 disabled={false}
          */}
          <Form.Item noStyle shouldUpdate>
            {/* <Button
              block
              type="submit"
              color="primary"
              className="login-submit"
            >
              登 录
            </Button> */}

            {() => {
              // console.log('是否有格式错误：', form.getFieldsError())
              return (
                <Button
                  block
                  color="primary"
                  type="submit"
                  className="login-submit"
                  disabled={
                    !form.isFieldsTouched(true) ||
                    !!form
                      .getFieldsError()
                      .filter(({ errors }) => errors.length).length
                  }
                >
                  登录
                </Button>
              )
            }}
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
